<template>
  <div class="mcp-market-container">
    <div class="mcp-market-header">
      <h2>MCP市场</h2>
      <el-input v-model="search" placeholder="搜索MCP名称/描述" class="mcp-search" clearable />
    </div>
    <div class="mcp-list">
      <el-empty v-if="filteredMCPs.length === 0" description="暂无相关MCP" />
      <el-row :gutter="20">
        <el-col :span="8" v-for="mcp in filteredMCPs" :key="mcp.id">
          <el-card class="mcp-card">
            <div class="mcp-card-header">
              <h3>{{ mcp.name }}</h3>
              <el-tag type="success" v-if="mcp.status === 'active'">可用</el-tag>
              <el-tag type="info" v-else>维护中</el-tag>
            </div>
            <div class="mcp-card-body">
              <p>{{ mcp.description }}</p>
            </div>
            <div class="mcp-card-actions">
              <el-button type="primary" @click="viewDetail(mcp)">查看详情</el-button>
              <el-button type="success" @click="subscribeMCP(mcp)">订阅</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-dialog v-model="detailVisible" title="MCP详情" width="500px">
      <div v-if="currentMCP">
        <h3>{{ currentMCP.name }}</h3>
        <p>{{ currentMCP.description }}</p>
        <p>状态：<el-tag :type="currentMCP.status === 'active' ? 'success' : 'info'">{{ currentMCP.status === 'active' ? '可用' : '维护中' }}</el-tag></p>
        <p>价格：{{ currentMCP.price }} 元/月</p>
      </div>
      <template #footer>
        <el-button @click="detailVisible = false">关闭</el-button>
        <el-button type="success" @click="subscribeMCP(currentMCP)">订阅</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
const search = ref('')
const detailVisible = ref(false)
const currentMCP = ref(null)
const mcpList = ref([
  { id: 1, name: '医疗知识MCP', description: '提供权威医疗知识API服务', status: 'active', price: 99 },
  { id: 2, name: '健康管理MCP', description: '健康档案、体检报告智能分析', status: 'active', price: 59 },
  { id: 3, name: '智能问诊MCP', description: 'AI辅助问诊与分诊服务', status: 'maintain', price: 129 },
])
const filteredMCPs = computed(() => {
  if (!search.value) return mcpList.value
  return mcpList.value.filter(mcp => mcp.name.includes(search.value) || mcp.description.includes(search.value))
})
const viewDetail = (mcp) => {
  currentMCP.value = mcp
  detailVisible.value = true
}
const subscribeMCP = (mcp) => {
  // 订阅逻辑，后续可对接后端
  alert(`已订阅：${mcp.name}`)
  detailVisible.value = false
}
</script>

<style scoped>
.mcp-market-container {
  padding: 40px;
  background: #f5f7fa;
  min-height: 100vh;
}
.mcp-market-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}
.mcp-search {
  width: 300px;
}
.mcp-list {
  margin-top: 20px;
}
.mcp-card {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  margin-bottom: 20px;
}
.mcp-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.mcp-card-body {
  min-height: 60px;
  color: #666;
}
.mcp-card-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 10px;
}
</style> 